<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <link rel="stylesheet" href="./static/css/test.css">
</head>

<body>
    <table class="table-head">
        <thead class="tab-head">
            <tr>
                <th><input type="checkbox" id="cheAll">全选</th>
                <th>ID</th>
                <th>名字</th>
                <th>地址</th>
                <th>排名</th>
                <th>国家</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
    <div class="wrap">
        <table class="table-body">
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>Google</td>
                    <td>https://www.google.cm/</td>
                    <td>1</td>
                    <td>USA</td>
                    <td>删除</td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <table class="table-foot">
        <thead class="tab-foot">
            <tr id="control">
                <th>已选择<span class="check">(1/10)</span></th>
                <th id="add">添加</th>
                <th id="del">删除</th>
                <th id="modifi">修改</th>
                <th id="query">查询</th>
                <th id="prev">上一页</th>
                <th id="next">下一页</th>
            </tr>
        </thead>
    </table>
    <!-- 弹出层 -->
    <div class="modal">
        <div class="mask"></div>
        <div class="modal-body">
            <div class="add">
                <h4 class="modal-title">请输入你要添加的信息</h4>
                <div class="modal-row">
                    <span>id:</span>
                    <input type="text">
                </div>
                <div class="modal-row">
                    <span>名字:</span>
                    <input type="text">
                </div>
                <div class="modal-row">
                    <span>地址:</span>
                    <input type="text">
                </div>
                <div class="modal-row">
                    <span>排名:</span>
                    <input type="text">
                </div>
                <div class="modal-row">
                    <span>国家:</span>
                    <input type="text">
                </div>
                <div class="control">
                    <button class="submit" data-id="add">提交</button>
                    <button class="cancel">取消</button>
                </div>
            </div>
            <div class="del">
                <h4 class="modal-title">已选中1条，确定要删除吗</h4>
                <div class="control">
                    <button class="submit" data-id="del">提交</button>
                    <button class="cancel">取消</button>
                </div>
            </div>
            <div class="modifi">
                <h4 class="modal-title">暂不支持</h4>
                <button class="submit" data-id="modifi">提交</button>
                <button class="cancel">取消</button>
            </div>
            <div class="query">
                <h4 class="modal-title">暂不支持</h4>
                <button class="submit" data-id="query">提交</button>
                <button class="cancel">取消</button>
            </div>
        </div>
    </div>
    <script src="./static/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            // const basics = 'http://localhost:3000';
            const basics = '';
            let PAGE_INDEX = 1

            function Ajax(page) {
                $.ajax({
                    url: basics + '/websites/lists',
                    type: 'GET',
                    dataType: 'JSON',
                    data: {
                        page: page,
                        pageSize: 20
                    },
                    success: function (msg, textStatus) {
                        console.log(msg)
                        textStatus && render(msg.data)
                    },
                    error: function (xhr, status, err) {
                        return err
                    }
                })
            }
            Ajax(PAGE_INDEX);
            // 加载页面
            function render(data) {
                let fragment = new DocumentFragment();
                $(data).each(function (i, el) {
                    let tr = document.createElement('tr');
                    let store = [];
                    for (const key in el) {
                        let html = `<td>${el[key]}</td>`
                        store.push(html)
                    }
                    let td_check = `<td><input type="checkbox" data-index="${i}" class="che"></td>`
                    store.unshift(td_check)
                    tr.innerHTML = store.join('');
                    fragment.append(tr)
                })
                document.querySelector('.table-body>tbody').append(fragment)
                init(data.length)
            }

            // 初始化 ==============================================================
            function init(len) {
                // 数据初始化
                initTabFoot(len)
                // 绑定事件
                // 单选框
                OnChecked(len)
                // 全选框
                OnCheckedAll(len)
            }

            // 初始化TabFoot数据
            function initTabFoot(len) {
                $('.check').html(`(0/${len})`)
            }

            // 事件绑定 ==================================================================

            $('#control').on('click', 'th', function () {
                // 弹窗事件
                let id = ['add', 'del', 'modifi', 'query'];
                if (id.includes(this.id)) {
                    modalShow(this.id)
                    // 向下翻页
                } else if (this.id === 'next') {
                    PAGE_INDEX++
                    Page(PAGE_INDEX)
                    // 向上翻页
                } else if (this.id === 'prev') {
                    PAGE_INDEX--
                    Page(PAGE_INDEX)
                }

            })

            // 显示弹窗
            function modalShow(name) {
                $('.modal').addClass('show')
                let node = $('.' + name)
                node.addClass('show')
            }
            // 取消弹窗
            $('.cancel').on('click', function () {
                $(this).parents().removeClass('show')
            })

            // input单选框
            function OnChecked(len) {
                let $table = $('.table-body')
                let checked = $('.checkbox')
                let flag = false;
                $table.on('change', 'input', function () {
                    let index = $(this).attr('data-index')
                    let checkedLen = $('.che:checked').length;
                    $('.check').html(`(${checkedLen}/${len})`)
                    if (checkedLen === len) {
                        flag = true
                    } else {
                        flag = false
                    }
                    $('#cheAll').prop('checked', flag)
                })
            }

            // input全选框
            function OnCheckedAll(len) {
                let cheAll = $('#cheAll')
                cheAll.prop('checked', false)
                cheAll.on('change', function () {
                    $('.che').prop('checked', this.checked)
                    let checkedLen = $('.che:checked').length;
                    $('.check').html(`(${checkedLen}/${len})`)
                })
            }

            // 翻页
            function Page(page) {
                $('.table-body>tbody').html('')
                Ajax(page)
            }

            // 曾删改查 =================================================

        //     $('.submit').on('click', function () {
        //         let target = $(this).attr('data-id')
        //         dataChange[target]();
        //     })

        //     const dataChange = {
        //         add: function () {
        //             // code
        //         },
        //         del: function () {

        //         },
        //         modifi: function () {

        //         },
        //         query: function () {

        //         }
        //     }
        })
    </script>
</body>

</html>